<template>
  <select-cascader
    :value="value"
    :el-css="elCss"
    :fetch-data="fetchData"
    :filter="true"
    top-as-first
    :props="props"
    :top-value="topValue"
    :bottom-level="bottomLevel"
    :clearable="clearable"
    :change-on-select="changeOnSelect"
    :popper-class="popperClass"
    :placeholder="placeholder"
    :size="size"
    :structure="structure"
    :has-children="hasChildren"
    @change="onChange"
  ></select-cascader>
</template>
<script>
import SelectCascader from './SelectCascader'

export default {
  components: {
    SelectCascader,
  },
  props: {
    value: String,
    size: String,
    elCss: String,
    clearable: { type: Boolean, default: true },
    changeOnSelect: { type: Boolean, default: true },
    popperClass: String,
    placeholder: { type: String, default: '请选择品类' },
    bottomLevel: Number,
    topValue: { type: String, default: '100000000000' },
    autoInit: { type: Boolean, default: true },
  },
  data() {
    return {
      props: { value: 'id', label: 'categoryName', children: 'children' },
      structure: [2, 2, 2, 3, 3],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    onChange(val, label) {
      // 先将值改变，再抛出change事件
      this.$emit('input', val)
      setTimeout(() => {
        this.$emit('change', val, label)
      }, 0)
    },
    hasChildren(v) {
      return v.nextCategory && v.nextCategory.length ? [true, v.nextCategory] : [false, null]
    },
    fetchData(value, level) {
      return this.$http
        .get(`/industrial/category/categoryByList/?id=${value}&level=${level + 1}`)
        .then(res => res.data || [])
    },
  },
}
</script>
<style scoped></style>
